<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Unwrap data
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if @unwrap_data}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <nav class="tabs">
      <ul>
        <li role="tab" aria-selected={{if (eq @unwrapActiveTab "data") "true" "false"}} class="{{if (eq @unwrapActiveTab "data") "is-active"}}">
          <button type="button" class="link link-plain tab has-text-weight-semibold" {{action (mut @unwrapActiveTab) "data"}} data-test-button-data>Data</button>
        </li>
        <li role="tab" aria-selected={{if (eq @unwrapActiveTab "data") "true" "false"}} class="{{if (eq @unwrapActiveTab "details") "is-active"}}">
          <button type="button" class="link link-plain tab has-text-weight-semibold" {{action (mut @unwrapActiveTab) "details"}} data-test-button-details>Wrap Details</button>
        </li>
      </ul>
    </nav>
    {{#if (eq @unwrapActiveTab "data")}}
      <div class="field">
        <div class="control">
          <JsonEditor @title="Unwrapped Data" @value={{stringify @unwrap_data}} @options={{hash
              readOnly=true
            }} />
        </div>
      </div>
    {{else}}
      <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
        {{#each-in @details as |key detail|}}
          <InfoTableRow @label={{key}} @value={{key}}>
            {{#if (or (eq detail "No") (eq detail "None"))}}
              <Icon class="has-text-grey" @glyph="cancel-square-outline" /> {{detail}}
            {{else}}
              {{#if (eq detail "Yes") }}
                <Icon class="has-text-success" @glyph="check-circle-outline" />
              {{/if}}
              {{detail}}
            {{/if}}
          </InfoTableRow>
        {{/each-in}}
      </div>
    {{/if}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <CopyButton @clipboardText={{stringify @unwrap_data}} @class="button is-primary" @buttonType="button" @success={{action (set-flash-message "Data copied!")}}>
        Copy
      </CopyButton>
    </div>
    <div class="control">
      <button {{on "click" this.onClear}} type="button" class="button">
        Back
      </button>
    </div>
  </div>
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless">
    <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />
    <MessageError @errors={{@errors}} />
    <div class="field">
      <label for="token" class="is-label">Wrapping token</label>
      <div class="control">
        <Input @value={{@token}} class="input" @id="token" @name="token" @autocomplete="off" @spellcheck="false" data-test-tools-input="wrapping-token" />
      </div>
    </div>
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button type="submit" data-test-tools-submit="true" class="button is-primary">
        Unwrap data
      </button>
    </div>
  </div>
{{/if}}
